<template>
    <div class="searchUser">
        <p v-if="empty === true">没有相应数据</p>
        <div class="oneNotice" v-for="(user,index) in list" :key="index">
            <router-link class="headPic"  :to="`/themself/${user.userId}`">
                <van-image 
                    width="1.3rem" 
                    height="1.3rem" 
                    radius="100%" 
                    fit="cover" 
                    :src="user.img" 
                />
            </router-link>
            <div class="detail">
                <div class="detailLeft">
                    <p>{{user.nickname}}</p>
                    <p>{{user.profile}}</p>
                </div>
                <div class="detailRight">
                    <button v-if="user.isMelf !== true" @click="follow(user.userId,index)" :class="user.followName">{{user.followName == 'notFollow' ? '关注' :'已关注'}}</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import jwtDecode from 'jwt-decode'

export default {
    name:'SearchUser',
    data() {
        return {
            list:null,
            empty:false,
            decode:null,
            isLogin:false,
            content:null
            // followName:'notFollow',
        }
    },
    watch:{
        '$route' (to, from) {
            if(to.query.content !== from.query.content){
                console.log(to.query.content)
                this.content = to.query.content;
                this.getInfo()
            }
        } 
    },
    mounted() {
        if(sessionStorage.getItem('token')){
            let token=sessionStorage.getItem("token")
            this.decode = jwtDecode(token);
            this.login = true
        }else{
            this.login = false
        }
        this.content = this.$route.query.content
        this.getInfo()
    },
    methods: {
        getInfo(){
            //模糊查询用户
            axios({
                url:'/body/findUsers',
                method:"get",
                params:{
                    nickname:this.content
                }
            }).then(data=>{
                this.list = data.data.data
                if(this.list.length === 0){
                    this.empty = true
                }else{
                    this.empty = false
                }
                //如果没有登录。不能做处理
                if(this.login === false){
                    for(let i = 0;i < this.list.length;i++){
                        this.list[i].isMelf = false
                        this.list[i].followName = 'notFollow'//这里要判断一下用户有没有关注他
                    }
                    this.list = Object.assign({},this.list)
                }else{
                    for(let i = 0;i < this.list.length;i++){
                        if(this.list[i].userId === this.decode.userId){
                            this.list[i].isMelf = true
                        }
                        // this.list[i].followName = 'notFollow'//这里要判断一下用户有没有关注他
                        axios({
                            url:'/follow/judgeFollow',
                            method:'get',
                            params:{
                                userId:this.decode.userId,
                                useredId:this.list[i].userId
                            },
                            headers:{
                                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                            }
                        }).then(data=>{
                            // console.log(data)
                            if(data.data.data === "您未关注此用户"){
                                    this.list[i].followName = 'notFollow'
                            }else{
                                this.list[i].followName = 'isFollow'
                            }
                            this.list = Object.assign({},this.list)
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                }
                
            }).catch(err=>{
                console.log(err)
            })
        },
        follow(userId,index){
            const followParam = new URLSearchParams()
            followParam.append('userId',String(this.decode.userId))//关注人的id
            followParam.append('useredId',String(userId))//被关注人的id
            axios({
                url:'/follow/addFollow',
                method:'post',
                data:followParam,
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{
                if(data.data.data !== '成功关注'){
                    this.cancel(userId,index)//取消关注
                }else{
                    if(data.data.code === 20000){
                        this.list[index].followName = 'isFollow'
                        this.list = Object.assign({}, this.list)

                        console.log('关注成功')
                        //给服务器发送消息
                        let sendParam = new URLSearchParams()
                        sendParam.append('bodyMessage',this.content)
                        sendParam.append('content',`${this.decode.nickname} 关注了你`)
                        sendParam.append('form',String(this.decode.userId))
                        sendParam.append('to',String(userId))
                        sendParam.append('username',this.decode.nickname)
                        sendParam.append('classes',String(4))

                        axios({
                            method:'post',
                            url:'/body/sendMessage',
                            data:sendParam,
                            headers:{
                                'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                            }
                        }).then(data=>{
                            if(data.data.code === 20000){
                                console.log('发送成功')
                            }
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        cancel(userId,index){
            const calcelParam = new URLSearchParams()
            calcelParam.append('userId',String(this.decode.userId))
            calcelParam.append('useredId',String(userId))
            axios({
                url:'/follow/deleteFollow',
                method:"DELETE",
                data:calcelParam,
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{//取消关注之后
                if(data.data.code === 20000){
                    console.log(this.list[index])
                    this.list[index].followName = 'notFollow'
                    this.list = Object.assign({}, this.list)

                    console.log('取消关注')
                }
            }).catch(err=>{
                console.log(err)
            })
        }   
    },
}
</script>

<style lang="less" scoped>
.isFollow{
    color: var(--themeColor);
    background-color: white;
    border-color: var(--themeColor) !important;
}
.notFollow{
    border-color: var(--themeColor) !important;
    color: white;
    background-color: var(--themeColor) ;
}
.oneNotice{
        display: flex;
        padding: 0.25rem;
        border-top: solid 1px #dbdbdb;
        .headPic{
            display: flex;
            align-items: center;
        }
        .detail{
            flex: 1;
            display: flex;
            .detailLeft{
                margin-left: 0.3rem;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #3b3b3b;
                p,i{
                    font-size: 0.35rem;
                }
                p{
                    &:nth-child(1){
                        color: black;
                        margin-bottom: 0.1rem;
                    }
                    &:nth-child(2){
                        margin-bottom: 0.2rem;
                    }
                }
            }
            .detailRight{
                display: flex;
                align-items: center;
                width: 1.8rem; 
                button{
                    padding: 0.2rem 0;
                    text-align: center;
                    width: 100%;
                    border-radius: 100px;
                    outline: none;
                    border: solid 1px;
                }
            }
        }
    }
</style>